<template>
  <div>
    <!-- 注册头 -->
    <commonHeader :titleName="titleName"></commonHeader>
    <!-- 注册界面 #cccccd-->
    <div class="login" style="display: flex;justify-content: space-around;">
      <div style="width: 36%;margin-top: 60px;">
        <img width="100%" src="../../assets/yjk.png" />
      </div>
      <div class="login-con">
        <div style="text-align: center;height: 50px;line-height: 52px;color: black;background-color: #d6e1e84f;">
          <span style="color:#6b6a6a ;">欢迎注册俏郎中-商家端</span>
        </div>
        <div icon="log-in">
          <div class="form-con">
            <el-form @keydown.enter.native="handleSubmit">
              <div class="iptClass" >
                  <el-input v-model="form.username" class="ipt" @change="checkUsernameVerify" placeholder="请输入账号,将作为管理员登陆的账号">
                    <span slot="prepend">
                      <i class="el-icon-edit" />
                    </span>
                  </el-input>
                  <!-- 小图标 -->
                  <div>
                     <div v-if="usable=='yes'" style=" float: right;margin-top: -35px;margin-right: 15px;color: #50e84e;font-size: 22px;">
                          <span slot="prepend" >
                            <i class="el-icon-circle-check" />
                          </span>
                          <span style="font-size: 14px;vertical-align: middle;">{{message}}</span>
                      </div>
                      <div v-if="usable=='no'" style=" float: right;margin-top: -35px;margin-right: 15px;color: #e02c2ce0;font-size: 22px;">
                          <span slot="prepend" >
                            <i class="el-icon-circle-close" />
                          </span>
                          <span style="font-size: 14px;vertical-align: middle;">{{message}}</span>
                      </div>
                  </div>
              </div>
              <div class="iptClass">
                <el-input v-model="form.password" class="ipt" type="password" placeholder="请输入密码">
                  <span slot="prepend">
                    <i class="el-icon-lock" />
                  </span>
                </el-input>
              </div>

              <div class="iptClass">
                <el-input v-model="form.phone" class="ipt" placeholder="请输入手机号">
                  <span slot="prepend">
                    <i class="el-icon-user-solid" />
                  </span>
                </el-input>
              </div>
              <div class="iptClass">
                <el-input v-model="form.verify_code" placeholder="请输入验证码">
                  <span slot="prepend">
                    <i class="el-icon-bangzhu" />
                  </span>
                </el-input>
                <el-button type="text" plain class="btn-code" @click="getCode(form.phone)">
                  <span v-if="flag">获取验证码</span>
                  <span v-else>{{time}}s重新获取</span>
                </el-button>
              </div>
              <!-- 商家信息 -->
              <!-- <div style="width: 50%;">
                      <div style="font-size: 20px;color: snow;padding:20px 20px 20px 0px;text-align: center;">商家信息</div>
                     <div class="iptClass">
                        <el-input v-model="form.company_name" class="ipt" placeholder="请输入企业名称">
                          <span slot="prepend">
                            <i class="el-icon-office-building" />
                          </span>
                        </el-input>
                      </div>
                      <div class="iptClass">
                        <el-input v-model="form.Unified_social_credit_code" class="ipt" placeholder="请输入统一社会信用代码">
                          <span slot="prepend">
                            <i class="el-icon-lollipop" />
                          </span>
                        </el-input>
                      </div>

                      <div>

                      </div>
                  </div> -->
            </el-form>
            <!-- 登陆页面显示-->
            <div style="text-align: center;">
              <!-- <p> <i style="color: #bdbdbd;" class="el-icon-message-solid"><span style="color: #6d6d6d;font-size: 15px;">
                    提交申请后，客服将会尽快与您取得联系 </span></i></p> -->
              <el-button style="width: 90%;" type="primary" @click="registerAction(form)">立即注册</el-button>
              <div style="margin-top: 15px;margin-bottom: 15px;color: #bdbdbd;">
                <router-link to="/login">登录</router-link>
              </div>
            </div>
            <!-- <p id="pwrap">
              <router-link to="login"><span id="spanleft">返回登录页</span></router-link>
              <router-link to="forget-pwd"><span id="spanright">忘记密码</span></router-link>
            </p> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 脚部 -->
    <div>
      <commonFooter></commonFooter>
    </div>
  </div>
</template>

<script>
  import commonHeader from "../LoginRegisterCommon/header.vue"
  import commonFooter from "../LoginRegisterCommon/footer.vue"
  export default {
    name: 'Register',
    data() {
      return {
        form: {
          username: "",
          phone: "",
          verify_code: "",
          password: "",
          // passwordcheck:"",
          /* name:"",
           contact_person:"",
           contact:"", */
          company_name: "",
          Unified_social_credit_code: "",
          business_license_img_id: ""
        },
        imageUrl: "",
        time: '',
        flag: true,
        titleName:"商家注册",
        usable:"",
        message:""
      }
    },
    components: {
      commonHeader,
      commonFooter
    },
    mounted() {
      // this.checkLogin()
    },
    methods: {
      // async checkLogin() {
      //   let _this = this
      //  let res = await _this.$api.getMerchantUserInfo()
      //  if (res.data.level == 'success') {
      //       _this.$message({
      //         message: '您已经登录成功！',
      //         type: "success",
      //         duration: 1000,
      //         onClose: () => {
      //           _this.$router.push({
      //             path: '/home'
      //           })
      //         }
      //       })
      //     }
      // },
      checkUsernameVerify(){
        if(this.form.username == ""){
          this.usable = ""
          this.message = ""
           return false
        }
        let params = {
          username:this.form.username
        }
        this.$api.usernameVerify(params).then((res)=>{
          console.log(res.data.data)
          if(res.data.data == "yes"){
              this.usable = 'yes'
              this.message = res.data.message
          }else{
             this.usable = 'no'
             this.message = res.data.message
          }
        })
      },
      //图片上传
      handleAvatarSuccess(res, file) {
        //console.log(res.data.id)
        this.form.business_license_img_id = res.data.id
        //console.log(file)
        this.imageUrl = res.data.img_url;
      },
      //验证图片格式
      beforeAvatarUpload(file) {
        /*const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;*/
      },

      // 手机号码验证 11位数字
      checkPhone(phoneNumb) {
        var user = /^1[0-9]{10}$/
        if (!user.test(phoneNumb)) {
          this.$message({
            message: '手机号码格式错误！',
            type: 'warning'
          });
          return false
        }

        return true
      },
      async getCode(phoneNumb) {
        let checkPhoneResult = this.checkPhone(phoneNumb)
        // 判断手机号是否正确，正确则获取验证码
        if (checkPhoneResult) {
          // 调用获取验证码方法
          const res = await this.$api.sendVerificationCode({
            phone: phoneNumb
          })

          if (res.data.level == 'success') {
            this.$message({
              message: '验证码发送成功,请注意查收',
              type: "success"
            })
            this.flag = false
            this.time = 60
            this.timeInterval = setInterval(() => {
              this.time--
              if (this.time < 0) {
                this.flag = true
                this.time = ""
                clearInterval(this.timeInterval)
              }
            }, 1000)
          } else {
            this.$message.error(res.data.message);
          }
        }
      },
      //注册提交方法
      async registerAction(form) {
        console.log(form)
        if((form.username && form.verify_code) == ""){
            this.$message({
              message: "选项不能为空",
              type: "warning"
            })
            return false;
         }
        let pwd = form.password;
        // let pwdCheck = form.passwordcheck;

        if (pwd.length < 6) {
          this.$message({
            message: "密码必须6位及以上字符！",
            type: "warning"
          })
          return false;
        }

        // if (pwd !== pwdCheck) {
        //   this.$message({
        //     message: "两次输入密码不匹配！",
        //     type: "warning"
        //   })
        //   return false;
        // }

        const res = await this.$api.signUp(form)
        console.log(res)
        // 判断，验证码回调为error弹窗提示，否则注册成功转到登陆页面
        if (res.data.level == 'success') {
          this.$message({
            message: res.data.message,
            type: res.data.level,
            duration: 2000,
            onClose: () => {
              this.$router.push({
                path: '/login'
              })
            }
          })
        } else {
          this.$message.error(res.data.message)
        }
      }
    }
  }
</script>
<style lang="scss" scoped="scoped">
  .login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    background-color: #ffffff2e;

    .login-con {
      /* width: 26%;
       margin: auto;
       padding-top: 110px; */
      width: 23%;
      height: 100%;
      margin-top: 60px;
      border: 1px solid #e3e3e3;



      .form-con {
        background-color: #ffffffe8;

        .iptClass {
          /* .code {
             width: 65%;
           } */

          .btn-code {
            width: 35%;
            height: 49px;
            margin-left: -35%;
            position: relative;
          }
        }
      }
    }
  }

  #pwrap {
    padding: 4px 20px 26px 20px;
    color: black;
  }

  #spanleft {
    float: left;

  }

  #spanright {
    float: right;
  }
</style>
<style scoped="scoped">
  .iptClass {
    margin-bottom: 2%;
    margin-top: 2%;
    border: 1px solid #ffffff1a;
  }

  .ipt {
    height: 50px;
  }

  /deep/ .el-input-group__prepend {
    background-color: #0000000f;
    border: none;
  }

  /deep/.el-input-group--prepend .el-input__inner,
  .el-input-group__append {
    background-color: #0000000f;
    height: 50px;
    border: none;
    color: #92979c;
  }

  /deep/.el-input-group__prepend {
    font-size: 18px;
  }

  /deep/.el-input__inner {
    padding: 0;
  }

  /* 图片上传css */
  .avatar-uploader /deep/.el-upload {
    border: 1px solid #807979;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
